<template>
	<uni-popup ref="zmessage_pop">
		<view class="zmessage4s">
			<view class="title">
				{{type == 0 ? '站内消息':'历史消息'}}
			</view>
			<view class="black_1">
				<scroll-view scroll-y="true" @scrolltolower="scroll" class="buyChicken_block_centent">

					<template v-for="(item,index) in list">
						<view class="item" @click="select(item,index)">
							<view class="left">
								
								<view class="text1">
									<view class="read" v-if="!item.is_read"></view>{{item.title}}
								</view>
								 <view class="text2">
									 <rich-text class="text2" :nodes="item.content"></rich-text>
								 </view>
							</view>

							<view class="left">
								<uni-dateformat :date="item.createtime*1000" format="yyyy-MM-dd">
								</uni-dateformat>
								
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
		<view style="height: 20px;"></view>
		<view class="bottom">
			<image class="close" @click="close" src="/static/my/close2.png"></image>
		</view>
		<zmesageDetial ref="zmesageDetial"></zmesageDetial>
	</uni-popup>
</template>

<script>
	import zmesageDetial from '@/components/zmessage/zmesageDetial.vue'
	export default {
		components: {
			zmesageDetial
		},
		name: "zmessage",
		data() {
			return {
				type: 0,
				page: 1,
				list: [
				// 	{
				// 	"id": 5,
				// 	"title": "活动消息",
				// 	"type": "inner_msg",
				// 	"content": "加入加油站能获得什么?<br>\r\n1.每天享有平台加油站交易的5%分红...<br>\r\n2.每天享有平台加油站交易的5%分红...<br>\r\n3.每天享有平台加油站交易的5%分红...<br>\r\n4.每天享有平台加油站交易的5%分红...<br>\r\n5.每天享有平台加油站交易的5%分红...<br>",
				// 	"weigh": 0,
				// 	"createtime": 1690513813,
				// 	"is_read": true
				// },
				]
			};
		},
		methods: {
			open(type) {
				this.type = type
				this.$refs.zmessage_pop.open()
				this.list.length =0
				this.getList()
			},
			close() {
				this.$refs.zmessage_pop.close()
			},
			select(item,index) {
				this.list[index].is_read =true
				this.$refs.zmesageDetial.open(item)
			},
			getList() {
				//inner_msg:站内信，notice：历史公告
				var data = {
					page: this.page,
					type: this.type == 0 ? 'inner_msg' : 'notice'
				}
				this.api.http.requests('sitemsg/lists', data, res => {
					if (res.data && res.data.length > 0) {
						this.list = this.list.concat(res.data)
					}
				}, "POST")
			},
			toPay() {
				this.$refs.pay.open()
			},
			scroll() {
				this.page = this.page + 1
				this.getList()
			},
		}
	}
</script>

<style scoped lang="less">
	.zmessage4s {
		background: linear-gradient(295deg, #D2823A 0%, #EF9164 100%);
		border-radius: 10px;
		padding: 2px;

		.title {
			text-align: center;
			font-size: 49rpx;
			font-weight: 800;
			color: #FFFFFF;
			padding: 5px;
		}

		.black_1 {
			display: flex;
			background-color: #FBF8E7;
			border-radius: 10px;
			// margin: 2px;

			.buyChicken_block_centent {
				height: 300px;
				width: 600rpx;
			}

			.item {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				margin: 10px;
				background-color: #FFFFFF;
				border-radius: 5px;

				.left {
					font-size: 26rpx;
					font-weight: 400;
					color: #242424;

					.text1 {
						display: flex;
						font-size: 32rpx;
						font-weight: 800;
						color: #242424;
						align-items: center;
						.read{
							width: 10px;
							height: 10px;
							background-color: red;
							border-radius: 50%;
						}
					}
					.text2{
						width: 360rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						height: 19px;
					}
				}

			}
		}
		

	}

	.bottom {
		text-align: center;
	}

	.close {
		text-align: center;
		margin: auto;
		width: 30px;
		height: 30px;
	}
</style>